<template>
  <el-row class="demo-radius">
    <el-col v-for="(radius, i) in radiusGroup" :key="i" :span="6" :xs="{ span: 12 }">
      <div class="title">{{ radius.name }}</div>
      <div class="value">
        <count-to :startVal="0" :endVal="radius.number" :style="{ color: 'brown' }"></count-to>
      </div>

    </el-col>
  </el-row>
</template>

<script  setup>
import { CountTo } from "vue3-count-to";
import { ref, onMounted } from "vue";
import myAxios from '../axios/index.js'
const loading = ref(true);
const baseData = ref({})
const radiusGroup = ref([]);
onMounted(() => {
  myAxios(
    {
      url: '/eChars/getBaseData',
      //注意get传值是params
      method: "get"
    }).then(res => {
      if (res.code == 200) {
        baseData.value = res.result;
        radiusGroup.value.push({
          name: "今日访问量",
          number: baseData.value.visitsCount,
        }, {
          name: "今日借书",
          number: baseData.value.lendCount,
        }, {
          name: "今日还书",
          number: baseData.value.borrowCount,
        })
    
      } else if (res.code == -9) {

      }
    }).catch(error => {
      if (error.code == 'ERR_NETWORK') {

        this.$router.push("/404");
      }
    })
})


</script>
<style scoped>
.demo-radius .title {
  color: var(--el-text-color-regular);
  font-size: 18px;
  text-align: center;
  font-weight: bold
}

.demo-radius .value {
  color: var(--el-text-color-primary);
  margin-top: 10px;
  text-align: center;
  font-weight: bold
}
</style>
